<template>
	<div>
		<zh-form ref="articleFormRef" :span="12" :model="state.form" :rules="state.rules">
			<zh-form-input prop="title" :disabled="props.showFlag" label="标题" placeholder="请输入文章的标题" v-model="state.form.title"></zh-form-input>
			<zh-form-input
				prop="shortTitle"
				:disabled="props.showFlag"
				label="标题简称"
				placeholder="请输入文章标题简称"
				v-model="state.form.shortTitle"
			></zh-form-input>
			<zh-form-select
				:disabled="props.showFlag && state.articleTypeDisabled"
				prop="articleType"
				label="文章类型"
				:options="state.dictData.articleType"
				v-model="state.form.articleType"
			></zh-form-select>
			<zh-form-select
				:disabled="props.showFlag"
				prop="articleCategory"
				label="文章分类"
				:options="state.dictData.articleCategory"
				v-model="state.form.articleCategory"
			></zh-form-select>
			<zh-form-select
				:disabled="props.showFlag"
				prop="articleReaderType"
				label="阅读对象"
				:options="state.dictData.articleReaderType"
				v-model="state.form.articleReaderType"
			></zh-form-select>
			<zh-form-select
				:disabled="props.showFlag"
				prop="publicFlag"
				label="是否公开"
				:options="state.publicFlagDict"
				v-model="state.form.publicFlag"
			></zh-form-select>
			<zh-form-select
				:disabled="props.showFlag"
				prop="contentType"
				label="内容类型"
				:options="state.dictData.contentType"
				v-model="state.form.contentType"
			></zh-form-select>
			<zh-col :span="24" v-if="state.form.contentType === 'richText'">
				<editor v-model="state.form.articleContent" height="600px" />
			</zh-col>
			<zh-form-select
				:disabled="props.showFlag"
				prop="showPosition"
				label="显示位置"
				:options="state.dictData.showPosition"
				v-model="state.form.showPosition"
			></zh-form-select>
			<zh-form-select
				v-if="state.form.contentType === 'file'"
				:disabled="props.showFlag"
				prop="fileType"
				label="文件类型"
				:options="state.dictData.fileType"
				v-model="state.form.fileType"
			></zh-form-select>
			<zh-form-input
				v-if="state.form.contentType === 'file'"
				prop="fileUrl"
				:disabled="props.showFlag"
				label="文件url"
				placeholder="请输入文章内容文件url"
				v-model="state.form.fileUrl"
			></zh-form-input>
			<zh-form-select
				:disabled="props.showFlag"
				prop="showType"
				label="列表展示类型"
				:options="state.dictData.showType"
				v-model="state.form.showType"
			></zh-form-select>
			<zh-form-date
				prop="publishTime"
				label="发布时间"
				:disabled="props.showFlag"
				placeholder="请输入发布时间"
				type="datetime"
				v-model="state.form.publishTime"
			></zh-form-date>
			<zh-form-date
				v-if="props.showFlag"
				:disabled="props.showFlag"
				prop="offTime"
				label="下架时间"
				placeholder="请输入下架时间"
				type="datetime"
				v-model="state.form.offTime"
			></zh-form-date>
			<zh-form-date
				v-if="props.showFlag"
				:disabled="props.showFlag"
				prop="lastEditTime"
				label="最后编辑时间"
				type="datetime"
				v-model="state.form.lastEditTime"
			></zh-form-date>
			<zh-form-date
				v-if="props.showFlag"
				:disabled="props.showFlag"
				prop="commitTime"
				label="提交审核时间"
				type="datetime"
				v-model="state.form.commitTime"
			></zh-form-date>
			<zh-form-input
				prop="publisher"
				:disabled="props.showFlag"
				label="发布主体"
				placeholder="请输入发布主体（人或单位）"
				v-model="state.form.publisher"
			></zh-form-input>
			<zh-form-choose-org :disabled="props.showFlag" prop="orgId" label="所属组织" v-model="state.form.orgId"></zh-form-choose-org>
			<zh-form-cascader
				prop="areaCode"
				label="行政区划"
				placeholder="请选择"
				:props="{ checkStrictly: true, emitPath: false }"
				v-model="state.form.areaCode"
				:disabled="props.showFlag"
				:options="state.areaCodeSelectTreeData"
			></zh-form-cascader>
			<zh-form-select
				prop="appId"
				:lazy="true"
				:disabled="props.showFlag"
				label="所属应用"
				v-model="state.form.appId"
				:fieldNames="{ label: 'appName', value: 'appId' }"
				funcCode="application0012"
				searchField="appName"
			></zh-form-select>
			
			<zh-form-select
				v-if="props.showFlag"
				:disabled="props.showFlag"
				prop="articleStatus"
				label="状态"
				:options="state.dictData.ARTICLESTATUS"
				placeholder="请选择"
				v-model="state.form.articleStatus"
			></zh-form-select>
			<zh-form-select
				:disabled="props.showFlag"
				prop="topFlag"
				label="是否置顶"
				:options="state.dictData.flag"
				v-model="state.form.topFlag"
			></zh-form-select>
			<zh-form-color-picker
				prop="color"
				:disabled="props.showFlag"
				label="标题字体颜色"
				placeholder="请选择"
				v-model="state.form.color"
			></zh-form-color-picker>
			<zh-form-color-picker
				prop="bgColor"
				:disabled="props.showFlag"
				label="背景颜色"
				placeholder="请选择"
				v-model="state.form.bgColor"
			></zh-form-color-picker>
			<zh-form-upload
				:disabled="props.showFlag"
				prop="imgUrl"
				label="显示小图"
				:span="24"
				type="picture"
				fileClassCode="98"
				:limit="5"
				returnType="url"
				fileTypes="png,jpg,jpeg,svg,gif"
				limitDesc="上传文件类型仅限png,jpg,jpeg,svg,gif"
				v-model="state.form.imgUrl"
			></zh-form-upload>
			<zh-form-upload
				:disabled="props.showFlag"
				prop="imgBigUrl"
				label="显示大图"
				:span="24"
				type="picture"
				fileClassCode="98"
				:limit="5"
				returnType="url"
				fileTypes="png,jpg,jpeg,svg,gif"
				limitDesc="上传文件类型仅限png,jpg,jpeg,svg,gif"
				v-model="state.form.imgBigUrl"
			></zh-form-upload>
			<zh-form-upload
				:disabled="props.showFlag"
				prop="fileUrlList"
				label="上传附件"
				:span="24"
				type="file"
				fileClassCode="98"
				:limit="5"
				v-model:fileList="state.form.fileUrlList"
			></zh-form-upload>
			<zh-form-select
				:disabled="props.showFlag"
				prop="linkType"
				label="链接类型"
				:options="state.dictData.linkType"
				v-model="state.form.linkType"
			></zh-form-select>
			<zh-form-input
				prop="linkUrl"
				v-if="state.form.linkType&&state.form.linkType!=='router'"
				:disabled="props.showFlag"
				label="链接地址"
				placeholder="请输入链接地址"
				v-model="state.form.linkUrl"
			></zh-form-input>
			<zh-form-input
				v-if="state.form.linkType&&state.form.linkType==='router'"
				prop="linkName"
				:disabled="props.showFlag"
				label="内部路由名"
				placeholder="请输入内部路由名"
				v-model="state.form.linkName"
			></zh-form-input>
			<zh-form-input
			v-if="state.form.linkType&&state.form.linkType==='router'"
				prop="linkPath"
				:disabled="props.showFlag"
				label="内部路由路径"
				placeholder="请输入内部路由路径"
				v-model="state.form.linkPath"
			></zh-form-input>
			<zh-form-input
				v-if="state.form.linkType"
				prop="linkParams"
				:rows="2"
				:span="24"
				type="textarea"
				:disabled="props.showFlag"
				label="链接参数"
				placeholder="请输入链接参数"
				v-model="state.form.linkParams"
			></zh-form-input>

			<zh-form-input
				:disabled="props.showFlag"
				:span="24"
				:rows="4"
				prop="remarks"
				type="textarea"
				label="备注"
				v-model="state.form.remarks"
			></zh-form-input>
			<zh-form-select
				:disabled="true"
				prop="authStatus"
				label="审核状态"
				:options="state.dictData.authStatus"
				v-model="state.form.authStatus"
			></zh-form-select>
			<zh-form-date :disabled="true" prop="authTime" label="审核时间" placeholder="" type="datetime" v-model="state.form.authTime"></zh-form-date>
			<zh-form-choose-user :disabled="true" prop="authUserId" label="审核人" v-model="state.form.authUserId"></zh-form-choose-user>
			<zh-form-input
				:disabled="true"
				:span="24"
				:rows="4"
				prop="authRemarks"
				type="textarea"
				label="审核意见"
				v-model="state.form.authRemarks"
			></zh-form-input>
			<zh-form-input
				prop="showCount"
				v-if="props.showFlag"
				:disabled="props.showFlag"
				label="阅读次数"
				:span="4"
				v-model="state.form.showCount"
			></zh-form-input>
			<zh-form-input
				prop="commentCount"
				:disabled="props.showFlag"
				label="评论次数"
				v-if="props.showFlag"
				:span="4"
				v-model="state.form.commentCount"
			></zh-form-input>
			<zh-form-input
				prop="likeCount"
				:disabled="props.showFlag"
				v-if="props.showFlag"
				label="点赞次数"
				:span="4"
				v-model="state.form.likeCount"
			></zh-form-input>
			<zh-form-input
				prop="collectCount"
				:disabled="props.showFlag"
				v-if="props.showFlag"
				label="收藏次数"
				:span="4"
				v-model="state.form.collectCount"
			></zh-form-input>
			<zh-form-input
				prop="reportCount"
				:disabled="props.showFlag"
				v-if="props.showFlag"
				label="举报次数"
				:span="4"
				v-model="state.form.reportCount"
			></zh-form-input>
		</zh-form>
	</div>
</template>
<script lang="ts" setup name="ArticleForm">
import { ElMessage } from 'element-plus';
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	articleInfo: {
		type: Object,
		default: () => {},
		required: false,
	},
	showFlag: {
		type: Boolean,
		default: false,
	},
	modelValue: Boolean,
});
//------------------定义子组件---------------------------
const articleFormRef = ref();
const emit = defineEmits(['update:modelValue']);
//------------------内部变量定义-------------------------
const state = reactive({
	form: { contentType: 'richText', showPosition: '20' } as any,
	articleTypeDisabled: false,
	publicFlagDict:[{dictKey:'0',dictValue:'否'},{dictKey:'1',dictValue:'是'}],
	rules: {
		title: [
			{
				required: true,
				message: '请输入标题',
				trigger: 'blur',
			},
		],
		articleType: [
			{
				required: true,
				message: '请选择文章类型',
				trigger: 'blur',
			},
		],
		contentType: [
			{
				required: true,
				message: '请选择内容类型',
				trigger: 'blur',
			},
		],
	},

	areaCodeSelectTreeData: [],
	parentSelectTreeData: [],
	codeDisabled: false,
	dictData: {} as any,
});
//------------------定义调用方法-------------------------
function getAreaCodeData() {
	setTimeout(() => {
		$api.common.send.post('dict0026', {}).then((res) => {
			state.areaCodeSelectTreeData = res.result;
			state.form.areaCode = $store.user.userInfo?.areaCode;
		});
	}, 20);
}

async function save() {
	//校验表单
	let checkFlag = await articleFormRef.value.checkForm();
	if (checkFlag) {
		const info = state.form;
		let ret = null as any;
		let systemPrivileges = $store.user.systemPrivileges;
		if (info.articleId) {
			if (systemPrivileges && systemPrivileges.indexOf('SUPERADMIN') >= 0) {
				ret = await $api.common.send.post('article0019', info);
			} else {
				ret = await $api.common.send.post('article0005', info);
			}

			ret.saveType = 'edit';
			if (ret.code === 0) {
				ElMessage.success('修改成功！');
				emit('update:modelValue', false);
			}
		} else {
			if (systemPrivileges && systemPrivileges.indexOf('SUPERADMIN') >= 0) {
				ret = await $api.common.send.post('article0020', info);
			} else {
				ret = await $api.common.send.post('article0004', info);
			}
			ret.saveType = 'add';
			if (ret.code === 0) {
				ElMessage.success('新建成功！');
				emit('update:modelValue', false);
			}
		}
		return ret;
	}
	return null;
}
//------------------初始化------------------------------
onMounted(() => {
	getAreaCodeData();
	//获取路由配置中param1参数
	let meta = useRouter().currentRoute.value.meta;
	const query: any = meta.query;
	state.form.articleType = query.articleType;
	if (query.articleType) {
		state.articleTypeDisabled = true;
	} else {
		state.articleTypeDisabled = false;
	}
	if (props.articleInfo && props.articleInfo.articleId) {
		setTimeout(() => {
			$api.common.send.post('article0002', { articleId: props.articleInfo.articleId }).then((res) => {
				state.form = Object.assign({}, res.result);
			});
		}, 20);
	}
});

const params = {
	dictFields: 'ARTICLESTATUS,authStatus,articleType,showPosition,flag,fileType,contentType,showType,articleCategory,articleReaderType',
};
$api.common.getBatchDict.post(params).then((res) => {
	state.dictData = res.result;
});
//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({ form: state.form, save });
</script>
<style lang="scss" scoped></style>
